<template>
  <div class="client-stage-drawer">
    <el-drawer v-model="isHandleDrawer" :with-header="false" :close-on-click-modal="false" destroy-on-close>
      <div class="stage-intention">
        <title-view title="审批" />
        <div class="state-forms" v-loading="formRenderLoading" element-loading-text="数据加载中...">
          <template v-if="formItemsData.length">
            <FormRender ref="formRenderRef" :forms="formItemsData" v-model="formModelData" />
          </template>
          <template v-else>
            <el-empty />
          </template>
        </div>
        <div class="state-btns">
          <el-button style="width: 92px; background-color: #f2f3f5" @click="handelCloseForm" size="default">取消</el-button>
        </div>
      </div>
      <div class="stage-follow-up">
        <title-view title="审批记录" />
        <div class="steps-container" v-loading="isApprovalLoading" element-loading-text="数据加载中...">
          <el-steps direction="vertical" v-if="approvalStepsList.length > 0" :active="stepsActive">
            <el-step v-for="item in approvalStepsList" :key="item.nodeId">
              <template #icon>
                <AvatarView
                  :info="item.user"
                  avatarName="name"
                  :avatarStyle="{
                    width: '50px',
                    height: '50px',
                    radius: '50%',
                    'flex-shrink': 0
                  }"
                />
              </template>
              <template #title>
                <div>
                  <div class="step-name">{{ item.user.name }}</div>
                  <div class="step-opt">{{ item.name }}({{ approvalResult(item.result).value }})</div>
                </div>
                <span class="step-date">{{ item.startTime }}</span>
              </template>
              <template #description>
                <div v-if="item.comment?.length">
                  <el-input type="textarea" disabled :value="comment(item)"></el-input>
                </div>
              </template>
            </el-step>
          </el-steps>
          <template v-else>
            <el-empty />
          </template>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
import FormRender from "@/components/customComponents/formRender.vue";
import { approvalForm } from "@/apis/workflow";
import { isHasFile } from "@/utils";
import { computed, ref } from "vue";
import useComputedParams from "@/hooks/useComputedParams";
import AvatarView from "@/components/customComponents/AvatarView/index.vue";
import { approvalDataByInstanceId } from "@/apis/clientLose";

const props = defineProps(["currentFormParams", "modelValue"]);
let $emit = defineEmits(["update:modelValue"]);

const isHandleDrawer = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    $emit("update:modelValue", val);
  }
});

//审批详情
const isApprovalLoading = ref(false);
const stepsActive = ref(0);
const approvalStepsList = ref([]);
const approvalStatusMaps = new Map([
  ["complete", "发起申请"],
  ["agree", "已同意"],
  ["refuse", "已拒绝"]
]);
const approvalResult = useComputedParams(data => {
  if (!data) {
    return "审批中...";
  }
  if (approvalStatusMaps.get(data)) {
    return approvalStatusMaps.get(data) || "";
  }
  return "";
});
const comment = computed(() => {
  return data => {
    return data?.comment?.length ? data?.comment[0]?.text : "";
  };
});
const getApprovalDetail = async () => {
  try {
    isApprovalLoading.value = true;
    const { data } = await approvalDataByInstanceId(props.currentFormParams.processId, customFormInstanceId.value);
    isApprovalLoading.value = false;
    approvalStepsList.value = data?.processProgressVo?.progress || [];
    stepsActive.value = data?.processProgressVo?.version || 0;
  } catch (err) {
    isApprovalLoading.value = false;
  }
};

//表单
const getAuditAndToDoData = async () => {
  try {
    formRenderLoading.value = true;
    const { data } = await approvalForm(customFormInstanceId.value);
    formRenderLoading.value = false;
    formItemsData.value = isHasFile(data?.formItems ?? [], data?.formData ?? {});
    if (isDisableFollowUp.value) {
      formItemsData.value.forEach(item => {
        item.props.disabled = true;
      });
    }
    formModelData.value = data?.formData || {};
  } catch (err) {
    formRenderLoading.value = false;
  }
};
const customFormInstanceId = ref(""); // 表单实例id
const formRenderLoading = ref(false);
const formItemsData = ref([]);
const formModelData = ref({});
const isDisableFollowUp = ref(false);

const handelCloseForm = () => {
  isHandleDrawer.value = false;
};

const { formInstanceId } = props.currentFormParams || {};
isDisableFollowUp.value = true;
customFormInstanceId.value = formInstanceId; // 表单实例id
customFormInstanceId.value && getAuditAndToDoData();
customFormInstanceId.value && getApprovalDetail();
</script>

<style scoped lang="scss">
@use "@/assets/styles/mixin";
.client-stage-drawer {
  :deep(.el-dialog__body) {
    @include mixin.flex;
    height: 600px;
    padding: 0;
  }
  .stage-intention,
  .stage-follow-up {
    width: 50%;
    height: 100%;
    padding: 24px 20px;
    box-sizing: border-box;
  }

  .stage-intention {
    border-right: 1px solid #dcdfe6;

    .state-forms {
      position: relative;
      width: 410px;
      height: 85%;
      padding: 20px 10px;
      box-sizing: border-box;
      margin-bottom: 20px;
      overflow-y: auto;
      background-color: #f6f8fa;
      border: 1px solid #dcdfe6;
      margin-top: 20px;
      :deep(.el-empty) {
        @include mixin.position-center;
      }
      :deep(.form-item-el) {
        width: 100%;
      }
    }
  }
}
.stage-follow-up {
  @include mixin.flex-column;
  padding: 24px 20px 24px 30px;
}
.steps-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  padding: 20px;
  :deep(.el-empty) {
    @include mixin.position-center;
  }
  :deep(.el-step__icon) {
    width: 50px;
    height: 50px;
  }
  .step-image {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    :deep(.el-image) {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  :deep(.is-finish) {
    .el-image {
      border: 2px solid #409eff;
    }
  }
  :deep(.el-step.is-vertical .el-step__main) {
    padding-left: 25px;
  }
  :deep(.el-step) {
    flex-basis: auto !important;
  }
  :deep(.el-step__icon.is-text) {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid inherit;
  }
  :deep(.el-step__icon.is-icon) {
    //width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid inherit;
  }
  :deep(.el-step__main) {
    min-height: 100px;
  }
  :deep(.el-step__title) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .step-name {
      font-size: 14px;
      color: #3d3d3d;
      line-height: 24px;
    }
    .step-opt,
    .step-date {
      font-size: 12px;
      color: #86909c;
      line-height: 24px;
    }
  }
  :deep(.el-step__description) {
    width: 100%;
    margin-bottom: 16px;
    font-size: 12px;
    color: #4e5969;
    line-height: 24px;
    div {
      //padding: 6px 16px;
      box-sizing: border-box;
      border-radius: 4px;
      background-color: #f6f8fa;
    }
  }
}
</style>
